<template>

  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="950px" :before-close="handleClose"
      :close-on-click-modal="false">
      <el-form :inline="false" :model="formInline" ref="delivery-add-form" :rules="formRules" class="demo-form-inline"
        v-loading="loadingForm" label-width="130px">

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="模板名称:" prop="templateName">
              <el-input v-model="formInline.templateName" class="cell-input" placeholder="请输入模板名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="计费方式:" prop="billing_method">
              <el-radio-group v-model="formInline.billing_method">
                <el-radio :label="3">按件数</el-radio>
                <el-radio :label="6">按重量</el-radio>
                <el-radio :label="8">按体积</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="配送区域及运费:" prop="name">
              <div>
                <el-table :data="postList">
                  <el-table-column label="可配送区域" align="left" prop="title" />
                  <el-table-column label="首件（m³）" align="center" prop="sortNumber" />
                  <el-table-column label="运费（元）" align="center" prop="sortNumber" />
                  <el-table-column label="续件（m³）" align="center" prop="sortNumber" />
                  <el-table-column label="续费（元）" align="center" prop="sortNumber" />

                  <el-table-column label="操作" align="center" width="140" fixed="right">
                    <template slot-scope="scope">
                      <el-link type="primary" :underline="false" style="margin:0 6px;">删除</el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="margin-top: 12px;">
                  <el-button icon="el-icon-plus">添加可配送区域</el-button>
                  <v-distpicker></v-distpicker>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="不配送区域:" prop="name">
              <el-button type="">选择区域</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    findwcSubDeliveryTemplate,
    updataWcSubDeliveryTemplate,
    addWcSubDeliveryTemplate
  } from "@/api/culturalCreativity/delivery.js";
  import VDistpicker from 'v-distpicker';
  let _this;
  export default {
    name: "EaaAdd",
    components: { VDistpicker },
    data() {
      return {
        postList: [],
        title: '',
        id: null,
        dialogVisible: false,
        formRules: {
          freight: {
            required: true,
            message: '请输入模板名称',
            trigger: 'none'
          },
          billing_method: {
            required: true,
            message: '请输入模板名称',
            trigger: 'none'
          }
        },
        formInline: {},
        loadingScreen: null,
        loadingForm: false,
        fileName: '',
        btnLoading: false,
      }
    },
    methods: {
      async init(id) {
        try {
          _this = this;
          this.title = '';
          this.resetFrom();
          this.dialogVisible = true;
          if (this.$refs['delivery-add-form']) this.$refs['delivery-add-form'].resetFields();
          if (!id) return this.title = '新增';
          this.title = '修改'
          this.loadingForm = true;
          let res = await findwcSubDeliveryTemplate(id);
          this.loadingForm = false;
          this.formInline.id = id;
          Object.keys(this.formInline).forEach(item => {
            this.formInline[item] = res.data[item];
          });
        } catch (e) {
          this.loadingForm = false;
          //TODO handle the exception
        }
      },
      resetFrom() {
        this.formInline = {
          name: "",
          localSite: "",
          duties: "",
          phone: "",
          attachmentAddress: "",
          beginTime: "",
          endTime: "",
          list: [],
          publicLeaveDays: "",
          reason: "",
          arrive: ""
        }
      },
      handleClose() {
        this.dialogVisible = false;
      },
      handleUpFileChange(file) {
        if (file.response) {
          if (file.response.code == 200) {
            this.fileName = file.name;
            this.formInline.attachmentAddress = file.response.url;
            this.$refs['delivery-add-form'].validateField('attachmentAddress');
          } else {
            this.fileName = '文件上传失败，请重新上传。'
          }
          this.loadingScreen.close();
        } else {
          this.loadingScreen = this.$loading({
            lock: true,
            text: '上传文件中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
        }
      },
      handleSubmit() {
        this.$refs['delivery-add-form'].validate(async valid => {
          try {
            if (valid) {
              let res;
              this.btnLoading = true;
              if (!this.formInline.id) {
                res = await addWcSubDeliveryTemplate(this.formInline);
                this.$message.success("添加成功");
              } else {
                res = await updataWcSubDeliveryTemplate(this.formInline);
                this.$message.success("更新成功");
              }
              this.btnLoading = false;
              this.dialogVisible = false;
              this.$emit("success");
            }
          } catch (e) {
            this.btnLoading = false;
          }
        });
      },
      handleReasonListDel(index) {
        let arr = this.formInline.list;
        this.formInline.list = [...arr.slice(0, index), ...arr.slice(index + 1, arr.length)];
        this.$refs['delivery-add-form'].validateField('reason');
      },
      handleReasonListAdd() {
        this.formInline.list.push({
          holidays: this.otherValue,
          dayNumber: 1
        });
        this.$refs['delivery-add-form'].validateField('reason');
      }
    },
    created() {
      this.resetFrom();
    },
    computed: {}
  }
</script>
<style lang="scss" scoped>
  .width100 {
    width: 590px;
  }

  .cell-input {
    width: 200px;
  }

  .up-file-wrappar {
    display: flex;
    align-items: center;
  }

  .total-day {
    display: inline-block;
    height: 36px;
    width: 40px;
    margin: 0 6px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    padding: 0 15px;
    box-sizing: border-box;
  }

  .up-file-name {
    display: inline-block;
    height: 36px;
    min-width: 555px;
    text-align: left;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    color: #606266;
    font-size: inherit;

    .text {
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 1; //行数
      -webkit-box-orient: vertical;
      max-width: 555px;
    }
  }
</style>
